<style lang="less">
@import "../../styles/common.less";
@import "./access.less";
.ivu-card-head i {
  vertical-align: middle;
}
</style>

<template>
    <div class="access">
        <Modal
            v-model="showModal"
            :title="`${mode}角色`"
            :ok-text="mode"
            @on-ok="handleSubmit"
        >
            <Form :model="formItem" :label-width="80" :rules="formRule" ref="form">
                <FormItem label="角色名: " prop="role">
                    <Input v-model="formItem.role" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="权限: " prop="access">
                    <Tree :data="accessTree" show-checkbox ref="tree"></Tree>
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="24">
                <Card>
                    <div slot="title" style="display: flex; justify-content: space-between;">
                        <div style="line-height: 32px;">
                            <Icon type="ios-people" size="22" style="margin-right: 12px;"></Icon>角色管理
                        </div>
                        <div>
                            <Tooltip content="新增">
                                <Button type="primary" @click="addRole" style=" margin-left: 8px"><Icon type="plus"></Icon> </Button>
                            </Tooltip>
                            <Tooltip content="下载">
                                <Button type="primary" @click=""><Icon type="ios-download"></Icon> </Button>
                            </Tooltip>
                        </div>
                    </div>
                    <div style="min-height: 200px">
                        <Table :columns="roleColumns" :data="roleData" size="small" ref="eventtable"></Table>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { roleData, generateRoleColumns } from "./data/role.js";

export default {
  name: "access_role",
  data() {
    return {
      showModal: false,
      mode: "新增",
      roleData,
      roleColumns: [],
      formItem: {
        role: "",
        access: []
      },
      accessTree: [
        {
          title: "全选",
          expand: true,
          children: [
            {
              title: "设备常规管理",
              expand: false,
              children: [
                {
                  title: "设备管理",
                  value: "management-device",
                  checked: false
                },
                { title: "种类管理", value: "management-type", checked: false },
                { title: "标签管理", value: "management-tag", checked: false }
              ]
            },
            {
              title: "设备定位",
              expand: false,
              children: [
                {
                  title: "实时定位",
                  value: "location-realtime",
                  checked: false
                },
                {
                  title: "电子围栏设置",
                  value: "location-area",
                  checked: false
                }
              ]
            },
            {
              title: "设备数据采集",
              expand: false,
              children: [
                { title: "医疗设备", value: "data-hospital", checked: false },
                { title: "科研设备", value: "data-research", checked: false }
              ]
            },
            {
              title: "设备效能分析",
              expand: false,
              children: [
                { title: "日视图", value: "analysis-day", checked: false },
                { title: "小时视图", value: "analysis-hour", checked: false },
                { title: "秒视图", value: "analysis-second", checked: false }
              ]
            },
            {
              title: "设备计费分析",
              expand: false,
              children: [
                { title: "计费历史查询", value: "cost-record", checked: false },
                { title: "计费规则配置", value: "cost-rule", checked: false }
              ]
            },
            {
              title: "设备故障管理",
              expand: false,
              children: [
                { title: "故障列表", value: "alert-list", checked: false },
                { title: "历史故障", value: "alert-history", checked: false }
              ]
            },
            {
              title: "权限管理",
              expand: false,
              children: [
                { title: "角色管理", value: "access-role", checked: false },
                { title: "用户管理", value: "access-user", checked: false }
              ]
            }
          ]
        }
      ],
      formRule: {
        role: [
          {
            required: true,
            message: "请输入角色名",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  mounted() {
    this.roleColumns = generateRoleColumns(this.editRole, this.deleteRole);
  },
  methods: {
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$Message.success(`${this.mode}成功!`);
        } else {
          this.$Message.error(`${this.mode}失败!`);
        }
      });
    },
    addRole() {
      this.showModal = true;
      this.mode = "新增";
    },
    editRole(row) {
      this.showModal = true;
      this.mode = "修改";
      this.formatAccessList(row.access);
      this.formItem = {
        role: row.role,
        access: []
      };
    },
    deleteRole(row) {
      this.$Modal.confirm({
        title: "删除角色",
        content: `确定删除角色 <strong>${row.role}</strong>？`,
        onOk: () => {}
      });
    },
    formatAccessList(accessList) {
      let tmpTree = JSON.parse(JSON.stringify(this.accessTree));
      let tmpList = [];
      for (let item in accessList) {
        tmpList = tmpList.concat(accessList[item]);
      }
      let allSelected = true;
      for (let i = 0; i < tmpTree[0].children.length; i++) {
        let item = tmpTree[0].children[i];
        let k = true;
        for (let j = 0; j < item.children.length; j++) {
          let jtem = tmpTree[0].children[i].children[j];
          tmpTree[0].children[i].children[j].checked = tmpList.includes(
            jtem.value
          );
          if (!tmpList.includes(jtem.value)) {
            allSelected = false;
            k = false;
          }
        }
        tmpTree[0].children[i].checked = k;
        if (k) tmpTree[0].children[i].indeterminate = false;
      }
      tmpTree[0].checked = allSelected;
      if (allSelected) tmpTree[0].indeterminate = false;
      this.accessTree = tmpTree;
    }
  }
};
</script>

<style>

</style>
